import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';

interface Crumb {
  text: string;
  link?: string;
  onClick?: Function;
}

interface Props {
  crumbs: Crumb[];
}
export default function BreadCrumb(props: Props) {
  const { crumbs } = props;
  return (
    <div className='bread-crumb-container' data-oid='exr:d63'>
      {crumbs.map(({ text, link, onClick }, i) => (
        <span key={i} data-oid='9dawn1z'>
          {link ? (
            <Link to={link} data-oid='39vzjr1'>
              {text}
            </Link>
          ) : onClick ? (
            <a onClick={() => onClick()} data-oid='h_3a_8z'>
              {text}
            </a>
          ) : (
            <span className='text' data-oid='233y9lm'>
              {text}
            </span>
          )}
          {i < crumbs.length - 1 && (
            <span className='text plr3' data-oid='fu5li:b'>
              /
            </span>
          )}
        </span>
      ))}
    </div>
  );
}
